<template>
  <div class="c-upload">
    <n-upload filelist v-bind="$attrs" accept="image/*" list-type="image-card" :custom-request="customRequest">
      点击上传
    </n-upload>
  </div>
</template>

<script setup lang='ts'>
import type { CustomRequestOptions, FileInfo } from 'naive-ui/es/upload/src/interface';
const attrs = useAttrs()
const customRequest = (options: CustomRequestOptions) => {
  let file = options.file.file
  const reader = new FileReader();
  reader.readAsDataURL(file!);
  reader.onload = () => {
    (attrs['file-list'] as FileInfo[]).forEach((e) => {
      if (e.batchId === options.file.batchId) {
        e.url = reader.result as string
      }
    })
  }
}
</script>

<style lang="scss">
.c-upload {
  .n-upload-file-list {
    display: flex !important;
  }
}
</style>